<template>
	<view>
		<!-- 遮罩选择 -->
		<u-popup v-model="show" mode="top" border-radius="20">
			<view class="warp" :style="{
			paddingTop:$top()+'px'
		}">
				<view class="suo">
					<view class="" style="width: 30%;display: flex;align-items: center;">
						<text @click="qiehuan">{{dizhix.city?dizhix.city.name:'选择'}}</text>
						<image class="img" @click="qiehuan" v-if="show&&type==2"
							src="http://puputong.huijipin.cn/uploads/20220321/5cfdb7d7abab7e4b8b1a137e35a4a51e.png" />
						<image class="img" @click="qiehuan" v-if="show&&type==1" style="width:25rpx;
							height: 12rpx;" src="http://puputong.huijipin.cn/uploads/20220321/24d284f71a7305fb7be3d924cb33e433.png" />
					</view>

					<view class="input">
						<image class="img_1"
							src="http://puputong.huijipin.cn/uploads/20220321/522fead3800de22c6cfc29e48b4b1721.png" />
						<input type="text" value="" placeholder="请输入搜索信息" />
					</view>
				</view>
				<di-zhi @onchage='onchage' v-if="type==1"></di-zhi>
				<view class="" v-if="type==2">
					<!-- <view class="xik" style="margin:  10rpx 0 10rpx 0;">
						<view class="xik_1" @click.stop="xuan_(item,index)" v-for="(item,index) in list">
							<text :style="{
									'font-style': xuan==index?'italic':'',
									'font-size': xuan==index?'32rpx':'28rpx',
									'font-family':'OPPOSans',
									'font-weight':  xuan==index?600:400,
									'color':xuan!=index?'#181818':'#FF1B1B'
								}">{{item.name}}</text>
							<text v-if="xuan==index"></text>
						</view>
					</view> -->
					<scroll-view scrollbars="none" :show-scrollbar='true' :scroll-x="true" class="scroll-x">
						<view class="sku_1" :style="{
							borderRadius:sku==index?'30rpx 30rpx 0px 0px':'30rpx',
							marginBottom: sku==index?'':'15rpx',
							height:sku==index?'75rpx':'60rpx'
							}" v-for="(item,index) in sc" @click="sku_(index)">
							<text>{{item.name}}</text>
							<u-icon v-if="sku==index" name="arrow-up-fill" size="15" />
							<u-icon v-else name="arrow-down-fill" size="15" />
						</view>
					</scroll-view>
					<!-- 选择内容 -->
					<scroll-view :scroll-y="true" class="neir">
						<text v-for="(item,index) in infoz" @click="infoz_(index)" v-if="sku==0" :style="{
							color:listindex.house_type==item.id?'rgb(255, 27, 27)':''
						}">{{item.name}} </text>
						<text v-for="(item,index) in infoz" @click="infoz_(index)" v-if="sku==1" :style="{
							color:listindex.industry_detail==item.id?'rgb(255, 27, 27)':''
						}">{{item.name}} </text>
						<text v-for="(item,index) in infoz" @click="infoz_(index)" v-if="sku==2" :style="{
							color:listindex.area_id==item.id?'rgb(255, 27, 27)':''
						}">{{item.name}} </text>
						<text v-for="(item,index) in infoz" @click="infoz_(index)" v-if="sku==3" :style="{
							color:listindex.bus_dis_id==item.id?'rgb(255, 27, 27)':''
						}">{{item.name}} </text>
					</scroll-view>
					<!-- 	<view class="neir">
					</view> -->
					<!-- 按钮 -->
					<view class="bfoot">
						<text @click="cz">重置</text>
						<text @click="submit">确定</text>
					</view>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "my-pop",
		props: ['zhanshi'],
		data() {
			return {
				info: {},
				sc: [{
						name: '类别'
					},
					{
						name: '行业细分'
					},
					{
						name: '区域'
					},
					{
						name: '商圈'
					}
				],
				show: false,
				type: 1,
				xuan: 0,
				sku: 0,
				sku_id: [{
						name: '全部'
					},
					{
						name: '临街商铺'
					},
					{
						name: '商场市场商铺'
					},
					{
						name: '社区商铺'
					},
					{
						name: '地铁景点商铺 '
					},
					{
						name: '工业区商铺'
					},
				],
				list: [{
						name: '店铺转让',
						info_type: 2
					},
					{
						name: '门面出租',
						info_type: 1
					},
					{
						name: '二手设备',
						info_type: 4
					},
					{
						name: '求租信息',
						info_type: 3
					},

				],
				listindexlabel: {},
				listindex: {
					house_type: '', //类别
					industry_detail: '', //行业细分
					area_id: '', //区域
					bus_dis_id: '' //商圈
				},
			};
		},
		watch: {
			dizhix(a) {
				// 区域
				this.api('Info/area', {
					city_id: a.city.id
				}).then(res => {
					this.info.area = res.data
				})
				// 商圈
				this.api('Info/businessDistrict', {
					city_id: a.city.id
				}).then(res => {
					this.info.businessDistrict = res.data.data
				})
			},
		},
		computed: {
			dizhix() {
				return this.$store.state.dizhi
			},

			infoz() {
				if (this.sku == 0) {
					return this.info.housetype
				} else if (this.sku == 1) {
					return this.info.industryDetail
				} else if (this.sku == 2) {
					// if (!this.dizhix.city) {
					// 	this.$toast('请选择地址!')
					// 	return
					// }
					return this.info.area
				} else if (this.sku == 3) {

					return this.info.businessDistrict
				}

			}
		},
		methods: {
			//重置
			cz() {
				this.listindex = {
					house_type: '', //类别
					industry_detail: '', //行业细分
					area_id: '', //区域
					bus_dis_id: '' //商圈
				}
				this.listindexlabel = {

				}
				this.show = false
				this.$emit('change', this.listindex, this.listindexlabel)
			},
			submit() {
				this.show = false
				this.$emit('change', this.listindex, this.listindexlabel)
			},
			//选择详细规格
			infoz_(index) {
				if (this.sku == 0) {
					this.listindex.house_type = this.infoz[index].id
					this.listindexlabel.lb = this.infoz[index].name
				} else
				if (this.sku == 1) {
					this.listindex.industry_detail = this.infoz[index].id
					this.listindexlabel.hy = this.infoz[index].name
				} else if (this.sku == 2) {
					this.listindex.area_id = this.infoz[index].id
					this.listindexlabel.qy = this.infoz[index].name
				} else if (this.sku == 3) {
					this.listindex.bus_dis_id = this.infoz[index].id
					this.listindexlabel.sq = this.infoz[index].name
				}
			},
			sku_(index) {
				if (index == 2) {
					if (!this.dizhix.city) {
						uni.showToast({
							title: '请选择地址',
							icon: "none",
						});
						console.log('请选择地址');
						return
					}
				} else if (index == 3) {
					if (!this.dizhix.city) {
						this.$toast('请选择地址!')
						return
					}
				}
				this.sku = index
			},
			onchage(a) {
				if (this.zhanshi == 1) {
					this.show = false
				} else {
					this.type = 2
				}
			},
			//选项卡大
			xuan_(item, index) {
				this.xuan = index
				this.listindex.info_type = this.list[index].info_type
			},
			//父传子
			sign(a, b, c, d, form) {
				this.show = a
				this.info = form
				this.type = b
				this.sku = c
				this.type = b
				this.xuan = d*1
				console.log(this.xuan);
				// this.listindex.info_type = d
				// console.log(this.listindex.info_type);

			},
			//切换地址和规格选择器
			qiehuan() {
				if (this.zhanshi == 1) {
					this.show = false
				} else {
					if (this.type == 1) {
						this.type = 2
					} else {
						this.type = 1
					}
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.xxk {
		.scroll-x {
			width: 100%;
			display: flex;
			box-sizing: border-box;
			flex-wrap: nowrap;
			white-space: nowrap;
			padding: 10upx 20upx 0;
		}

		.sku_1 {
			display: inline-block;
			margin-right: 20rpx;
			padding: 0 20rpx 0 20rpx;
			text-align: center;
			line-height: 60rpx;
			background: #F4F5F7;
			color: #666666;

			text {
				margin-right: 10rpx;
				font-size: 24rpx;
				font-family: OPPOSans;
				font-weight: 500;
				color: #666666;
			}
		}

	}

	::v-deep .u-tabbar__content {
		padding-bottom: env(safe-area-inset-bottom);
	}

	/deep/.uni-scroll-view::-webkit-scrollbar {
		/* 隐藏滚动条，但依旧具备可以滚动的功能 */
		display: none
	}

	.warp {
		position: relative;
		min-height: 650rpx;
		padding-bottom: 110rpx;
		box-sizing: border-box;

		// border-radius: 20rpx;
		.bfoot {
			position: absolute;
			width: 93%;
			left: 50%;
			transform: translateX(-50%);
			bottom: 15rpx;
			height: 80rpx;
			border-radius: 50rpx;
			text-align: center;
			line-height: 80rpx;
			overflow: hidden;

			text:nth-of-type(1) {
				width: 50%;
				display: inline-block;
				height: 80rpx;
				background: #FD9805;
				display: inline-block;
				font-size: 30rpx;
				font-family: OPPOSans;
				font-weight: 500;
				color: #FFFFFF;
			}

			text:nth-of-type(2) {
				width: 50%;
				display: inline-block;
				height: 80rpx;
				background: #FF1B1B;
				display: inline-block;
				font-size: 30rpx;
				font-family: OPPOSans;
				font-weight: 500;
				color: #FFFFFF;
			}
		}

		.neir {
			padding-left: 30rpx;
			padding-right: 30rpx;
			background-color: #F4F5F7;
			height: 400rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			width: 100%;

			text {
				font-size: 26rpx;
				font-family: OPPOSans;
				font-weight: 400;
				color: #333333;
				display: inline-block;
				height: 90rpx;
				line-height: 90rpx;
				width: 40%;
			}
		}

		.scroll-x {
			width: 100%;
			display: flex;
			box-sizing: border-box;
			flex-wrap: nowrap;
			white-space: nowrap;
			padding: 10upx 20upx 0;
		}

		.sku_1 {
			display: inline-block;
			margin-right: 20rpx;
			padding: 0 20rpx 0 20rpx;
			text-align: center;
			line-height: 60rpx;
			background: #F4F5F7;
			color: #666666;

			text {
				margin-right: 10rpx;
				font-size: 24rpx;
				font-family: OPPOSans;
				font-weight: 500;
				color: #666666;
			}
		}

		.sku {
			display: flex;
			width: 100%;

			.sku_1 {
				width: 180rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				background: #F4F5F7;
				border-radius: 30px;
				font-size: 24rpx;
				font-family: OPPOSans;
				font-weight: 500;
				color: #666666;
			}

		}

		.suo {
			padding: 30rpx 30rpx 30rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			max-height: 100rpx;

			.input {
				border: 1px solid #FF1B1B;
				display: flex;
				align-items: center;
				padding-left: 25rpx;
				width: 100%;
				height: 60rpx;
				background: rgba($color:#FFFFFF, $alpha: 0.3);
				border-radius: 30px;

				.img_1 {
					width: 28rpx;
					height: 28rpx;
					margin-right: 20rpx;
				}

				input {
					width: 100%;

					::v-deep .input-placeholder {
						font-size: 24rpx;
						font-family: OPPOSans;
						font-weight: 400;
						color: black;
					}
				}
			}

			text {
				font-size: 28rpx;
				font-family: OPPOSans;
				font-weight: 500;
				color: #181818;
				display: inline-block;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.img {
				width: 30rpx;
				height: 30rpx;
				margin-left: 10rpx;

			}

		}
	}

	.xik {
		display: flex;
		justify-content: space-around;

		.xik_1 {
			text-align: center;

			text:nth-of-type(1) {
				// display: block;
				// font-size: 32rpx;
				// font-family: OPPOSans;
				// font-weight: bold;
				// color: #FF1B1B;
			}

			text:nth-of-type(2) {
				display: block;
				margin: 10rpx auto;
				width: 36rpx;
				height: 10rpx;
				background: #FF1B1B;
				border-radius: 5rpx;
			}
		}

	}

	.content {
		position: relative;
		min-height: 1350rpx;
		background-color: #F4F5F7;

		.top {
			width: 100%;
			height: 440rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}

		.body {
			min-height: 440rpx;
			padding: 30rpx 30rpx 0rpx 30rpx;
			// box-sizing: border-box;
			// border: 1px solid black;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-image: url(https://s4.ax1x.com/2022/03/03/bY54Hg.png);

			.yingxiao {
				width: 100%;
				height: 260rpx;
				background: #7D7D7D;
				border-radius: 16rpx;
				position: relative;
				top: 20rpx;
			}

			.body2 {
				border: 1rpx solid black;
				width: 100%;
				height: 100rpx;
			}
		}
	}
</style>
